<template>
	<view class="content">
		<view class="header">
			<u-navbar 
			:border-bottom='false' 
			back-icon-color="#ffffff" 
			title-color="#ffffff" 
			:background="{background:'transparent'}" 
			back-text="" title="我的资产"></u-navbar>
			<view class="header_top">
				<view class="title">总资产</view>
				<view class="usdt">{{zongzicanubst.toFixed(2)}} USDT</view>
				<view class="price">≈￥{{zongzicanrmb}}</view>
			</view>
		</view>
		<view class="tab">
			<view class="item" @click="go('Transfer/index')">
				<image src="../../static/icon/zhuanzhang.png" mode=""></image>
				<view class="title">提现</view>
			</view>
			<view class="item" @click="go('ReceivePayment/index')">
				<image src="../../static/icon/shoukuan.png" mode=""></image>
				<view class="title">充值</view>
			</view>
			<view class="item" @click="go('Recording/index')">
				<image src="../../static/icon/jilu.png" mode=""></image>
				<view class="title">记录</view>
			</view>
		</view>
		<view class="nav_title">
			资产
		</view>
		<view class="nav_list">
			<div class="item">
				<view class="title usdt">
					USDT
				</view>
				<view class="right">
					<view class="top">
						<view class="lf">
							可用
						</view>
						<view class="lr">
							{{usdt.toFixed(2)}}
						</view>
					</view>
					<view class="center">
						<view class="lf">
							冻结
						</view>
						<view class="lr">
							{{djusdt.toFixed(2)}}
						</view>
					</view>
					<view class="btm">
						<view class="lf">
							折合(CNY)
						</view>
						<view class="lr">
							≈{{usdtrmb.toFixed(2)}}
						</view>
					</view>
				</view>
			</div>
			<div class="item">
				<view class="title bst">
					BST
				</view>
				<view class="right">
					<view class="top">
						<view class="lf">
							可用
						</view>
						<view class="lr">
							{{bst.toFixed(2)}}
						</view>
					</view>
					<view class="center">
						<view class="lf">
							冻结
						</view>
						<view class="lr">
							{{djbst.toFixed(2)}}
						</view>
					</view>
					<view class="btm">
						<view class="lf">
							折合(CNY)
						</view>
						<view class="lr">
							≈{{bstrmb.toFixed(2)}}
						</view>
					</view>
				</view>
			</div>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				usdt:0,//可用USDT
				usdtrmb:0,//USDT折合(CNY)
				bstrmb:0,//BST折合(CNY)
				bst:0,//可用BST
				djusdt:0,//冻结USDT
				djbst:0,//冻结BST
				zongzicanubst:0,//总资产
				zongzicanrmb:0,//总资产折合RMB
			}
		},
		onReady() {
			
		},
		onShow(){
			
		},
		onLoad() {
			this.getUserInfo()
		},
		onPullDownRefresh(){
			this.getUserInfo()
		},
		methods: {
			//获取用户信息
			getUserInfo(){
				this.$http({
					url:this.$api.user_getinfo,
					method:'POST',
					success:res=>{
						this.usdt 			= Number(res.data.usdt) 
						this.usdtrmb 		= Number(res.data.usdtrmb)
						this.djusdt 		= Number(res.data.djusdt)
						this.bst 			= Number(res.data.bst)
						this.bstrmb 		= Number(res.data.bstrmb)
						this.djbst 			= Number(res.data.djbst)
						this.zongzicanubst	= Number(res.data.zongzicanubst)
						this.zongzicanrmb	= Number(res.data.zongzicanrmb)
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
			//跳转
			go(e){
				uni.navigateTo({
				    url: `../${e}`
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content{
		.header{
			background:url(../../static/zz.png)center/cover no-repeat;
			.header_top{
				text-align: center;
				padding: 30rpx 0 20rpx 0;
				box-shadow: 0 5rpx 5rpx rgba(62,9,149,1);
				color: #ffffff;
				.title{
					color:#999999;
				}
				.usdt{
					font-weight: 600;
					font-size: 18px;
				}
				.price{
					font-size: 12px;
				}
			}
			
		}
		.tab{
			margin: 0 26rpx;
			background-color: $border-bottom-color;
			border-radius: 15rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 46rpx;
			.item{
				text-align: center;
				width: 33.33%;
				padding: 30rpx 0;
				image{
					max-width: 70rpx;
					max-height: 60rpx;
				}
				.title{
					margin-top: 20rpx;
					color:#FFFFFF
				}
			}
		}
		.nav_title{
			margin: 40rpx 26rpx 0 26rpx;
			font-size: 20px;
			font-weight: 600;
			color: #626cff;
			padding: 5rpx 0;
			position: relative;
			padding-left: 15rpx;
		}
		.nav_title::after{
			content: '';
			width: 8rpx;
			height: 100%;
			border-radius:4rpx;
			background-color: #626cff;
			position: absolute;
			left: 0;
			top: 0;
		}
		.nav_list{
			margin: 0 26rpx;
			background-color: $border-bottom-color;
			border-radius: 15rpx;
			padding: 24rpx 0;
			margin-top: 25rpx;
			.item{
				padding: 0 26rpx;
				border-bottom: 1px solid $border-btm-c;
				padding-bottom: 24rpx;
				padding-top: 24rpx;
				image{
					max-width:60rpx ;
					max-height: 60rpx;
				}
				.title{
					font-size: 18px;
					color:#FFFFFF ;
					font-weight: bold;
					margin-bottom: 15rpx;
				}
				.usdt{
					background: url(../../static/icon/USDT.png)left center no-repeat;
					background-size: 40rpx 40rpx;
					padding-left: 50rpx;
				}
				.bst{
					background: url(../../static/icon/bstlogo.png)left center no-repeat;
					background-size: 40rpx 40rpx;
					padding-left: 50rpx;
				}
				.right{
					display: flex;
					justify-content: space-between;
					>view{
						width: 33.3%;
						text-align: center;
						color: #FFFFFF;
					}
					.top{
						text-align: left;
					}
					.center{
						
					}
					.btm{
						text-align: right;
					}
					.lf{
						color: #999999;
					}
				}
			}
			.item:nth-child(1){
				padding-top: 0;
			}
			.item:last-child{
				padding-bottom: 0;
				border-bottom: 0;
			}
		}
	}
</style>